<script setup lang="ts">
import { reactive, ref } from 'vue'
import vueSignature from 'vue3-online-signature'
import { debounce } from 'lodash'
import { recognize } from './ocr'
// import { recognize } from './minist'

const vueSignatureRef = ref<any>()

const params = reactive({
  width: 480,
  height: 80,
  lineWidth: 2,
   
})

const result = ref('')

const src = ref('')

const onReset = () => {
  vueSignatureRef.value.reset()
}

const debounceGenImage = debounce(() => {
  result.value = ''
  vueSignatureRef.value.confirm()
  .then((res:{base64: string, points: any}) => {
    src.value = res.base64
    console.log('000', res.base64, res)
    recognize(res.base64).then(text => {
      result.value = text
      try {
        const r = eval(text)
        result.value = result.value + '=' + r
      } catch (err) {
        console.error(err)
      }
    })
  })
  .catch((err: any) => {
    console.error(err)
  })
}, 2000)

const onEnd = () => {
  debounceGenImage()
}
</script>

<template>
  <div>
    <h3 style="text-align: center;">手写计算器</h3>
    <div class="box">
      <div class="panel">
        <vueSignature ref="vueSignatureRef" @onMouseUp="onEnd" v-bind="params"/>
      </div>
      <div class="footer">
        <button class="btn" @click="onReset">擦 除</button>
        <div class="display">
          {{ result }}
        </div>
      </div>
    </div>
    <!-- <img :src="src" alt=""> -->
  </div>
</template>

<style scoped>
.paenl {
  /* width: 100%;
  height: 80px; */
}

.box {
  margin: 80px auto;
  width: 480px;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
}

.footer {
  border: 1px solid #e2e2e2;
  padding: 12px 4px;
  display: flex;
}

.btn {
  line-height: 28px;
}

.display {
  padding: 0 20px;
  align-self: center;
  font-size: 12px;
  color: #888;
}
</style>
